<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
    body {
        padding: 50px;
        background: #34495e;
    }

    input {
        border: solid 10px #ddd;
        height: 30px;
    }

    .error {
        border: solid 10px red;
    }
</style>

<body>
    <!-- <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <div v-bind="title"></div>
    <hr>
    <input type="text" v-model="content" />
    <div v-bind="content"></div> -->
    <input type="text" validate rule="max:12,min:3" />
    <input type="text" validate rule="max:3,isNumber" />
</body>
<script>
    // ???????
    "use strict";
    // 代理的使用方法
    //代理（拦截器）是对象的访问控制，setter/getter 是对单个对象属性的控制，而代理是对整个对象的控制。
    // 读写属性时代码更简洁;
    // 对象的多个属性控制统一交给代理完成
    // 严格模式下 set 必须返回布尔值
    //使用方法
    // const people = { name: '张三' };
    // const proxy = new Proxy(people, {
    //     get(obj, property) {
    //         console.log(obj, property);
    //         return obj[property];
    //     },
    //     set(obj, property, value) {
    //         //obj 使用的对象 property 学要设置的属性 value属性值
    //         obj[property] = value;
    //         return true;
    //     }
    // });
    // proxy.age = 10;
    // console.log(people)
    // 代理函数
    // 如果代理以函数方式执行时，会执行代理中定义 apply 方法。
    // 参数说明：函数，上下文对象，参数
    // //截取字符串
    // //下例中对数组进行代理，用于截取标题操作
    // const stringDot = {
    //     get(target, key) {
    //         //第一个传入的对象 第二个是当前对象的下标
    //         console.log(target, key);
    //         const title = target[key].title;
    //         const len = 5;
    //         return title.length > len ? title.substr(0, len) + '.'.repeat(3) : title;
    //     }
    // };
    // const lessons = [
    //     {
    //         title: "媒体查询响应式布局",
    //         category: "css"
    //     },
    //     {
    //         title: "FLEX 弹性盒模型",
    //         category: "css"
    //     },
    //     {
    //         title: "MYSQL多表查询随意操作",
    //         category: "mysql"
    //     }
    // ];
    // const stringDotProxy = new Proxy(lessons, stringDot);
    // console.log(stringDotProxy[0])
    //用代理实现双向绑定
    // function View() {
    //     //设置代理
    //     let proxy = new Proxy({}, {
    //         get(obj, property) { },
    //         set(obj, property, value) {
    //             console.log(value);
    //             obj[property] = value;
    //             document.querySelectorAll(`[v-model='${property}'],[v-bind="${property}"]`).forEach(item => {
    //                 item.innerHTML = value;
    //                 item.value = value;

    //             });
    //             return true;
    //         }
    //     });
    //     //初始化绑定元素事件
    //     this.run = function () {
    //         const els = document.querySelectorAll('[v-model]');
    //         els.forEach(item => {
    //             item.addEventListener('keyup', function () {
    //                 console.log(item.getAttribute('[v-model]'));
    //                 proxy[this.getAttribute('v-model')] = this.value;
    //             });
    //         });
    //     };
    // }
    // let view = new View().run;
    // view()
    // 表单验证
    //处理验证类
    // class V {
    //     max(value, len) {
    //         return value.length <= len;
    //     }
    //     min(value, len) {
    //         return value.length >= len;
    //     }
    //     isNumber(vlaue) {
    //         return /^\d+$/.test(value);
    //     }
    // }
    // // 代理工程
    // function makeProxy(target) {
    //     return new Proxy(target, {
    //         get(traget, key) {
    //             return target[key];
    //         },
    //         set(traget, key, el) {
    //             const rule = el.getAttribute('rule');
    //             const v = new V();
    //             let state = rule.split(',').every(rule => {
    //                 const info = rule.split(':');
    //                 return v[info[0]](el.value, info[1]);
    //             });
    //             el.classList[state ? "remove" : 'add']('error');
    //             return true;
    //         }
    //     });
    // }
    // console.log(makeProxy(document.querySelectorAll("[validate]")));
    // const nodes = makeProxy(document.querySelectorAll("[validate]"));
    // nodes.forEach((item, i) => {
    //     item.addEventListener("keyup", function () {
    //         nodes[i] = this;
    //     });
    // });
    function makeProxy(item) {
        return new Proxy(item, {
            get(item, pro) { },
            set(item, pro, value) {
                item.name = value + "我是张三";
                console.log(item);
                console.log(item.name);
                return true;
            }
        });
    }
    let obj = {
        name: '张三'
    };

    console.log(makeProxy(obj))
</script>

</html>